<template>
  <div class="m-proifo">
    <div class="f-pr">
      <img v-lazy="profile.avatarUrl" alt="">
    </div>
    <div class="info">
      <div class="name">
        <div class="name-f1">
          <div class="edit" v-if="profile.artistId">
            <router-link :to="{name:'Work',params:{id:profile.artistId}}"><i>查看歌手页</i></router-link>
          </div>
          <h2 class="j-name-wrap">
            <span class="singer">{{ profile.nickname }}</span>
            <span class="icon-1"></span>
            <span class="icon-2">{{ level }}
          <i class="lv"></i>
          </span>
            <i class="man" v-if="profile.gender===1"></i>
            <i class="women" v-if="profile.gender===2"></i>
          </h2>
          <div class="head-oper">
            <a href="#" class="head-1"><i class="send">发私信</i></a>
            <a href="#" class="head-2" style="display: none;"><i class="delfollow">已关注</i></a>
            <a href="#" class="guanzhu">关注</a>
          </div>
        </div>
        <!--              认证-->
        <p class="name-f2" v-if="identity.length>0">
          <i class="renz"></i>
          <span v-for="(item,index) in identity" :key="index"> {{ item.desc }}&nbsp;</span>
        </p>
        <!--              音乐人-->
        <p class="name-f2" v-if="musician.length>0">
          <i class="yinyueren"></i>
          <span v-for="(item,index) in musician" :key="index"> {{ item.desc }}&nbsp;
                  <span class="yyrtag" v-for="(child,i) in item.tags" :key="i" v-if="item.tags.length>0">
                    {{ child }}
                  </span>
                </span>
        </p>
        <!--              达人-->
        <p class="name-f2" v-if="expert.length>0">
          <i class="daren"></i>
          <span v-for="(item,index) in expert" :key="index"> {{ item.desc }}&nbsp;</span>
        </p>
      </div>
      <ul class="tab-box">
        <li class="frt">
          <router-link :to="{name:'Event',query:{id:$route.query.id}}">
            <strong>{{ profile.eventCount }}</strong>
            <span>动态</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'Follows',query:{id:$route.query.id}}">
            <strong>{{ profile.follows }}</strong>
            <span>关注</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'Fans',query:{id:$route.query.id}}">
            <strong>{{ profile.followeds }}</strong>
            <span>粉丝</span>
          </router-link>
        </li>
      </ul>
      <div class="f-brk" v-if="profile.signature">
        个人介绍：{{ profile.signature }}
      </div>
      <div class="s-fc3">
        <span v-if="city" style="margin-right: 20px">所在地区：{{ city }} </span>
        <span class="sep" v-if="profile.birthday>0">
                 年龄：<span>{{ dateStr }}后</span>
              </span>
      </div>
      <div class="s-fc3" v-if="bindings.length>0">
        <span class="tit" v-if="bindings[0].url">社交网络：</span>
        <ul class="u-logo">
          <li v-for="(u,y) in bindings" :key="y" v-if="u.url">
            <a :href="u.url" title="新浪微博" class="u-slg-sn u-slg"></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "@/utils/formatDate";
import {formatNumber} from "@/utils/formatNumber";
import cities from "@/http/city";
export default {
  name: "index",
  data() {
    return {
      actShow: false,
      identify: {},
      level: '',
      profile: {},
      userPoint: {},
      bindings: [],
      nickname: '',
      city: '',
      formatDate: formatDate,
      date: '',
      djList: [],
      playlist: [],
      formatNumber: formatNumber,
      searchParams: {
        total: '',
        pageSize: 9,
        pageNo: 1,
      },
      myself: [],
      other: [],
      identity: [],
      expert: [],
      musician: [],
      listenSongs:'',
      cities:cities

    }
  },
  computed: {
    dateStr() {
      let num2 = this.date.slice(1, 2)
      let num1 = this.date.slice(0, 1)
      if (num2 >= 5) {
        num2 = 5
      } else {
        num2 = 0
      }
      return (num1 + num2).toString()
    }
  },
  methods:{
    getArea(json, code) {
      let names = [];
      let codes = [];

      function findCity(list, code, father) {
        const index = list.findIndex(ev => {
          return ev.code === code;
        });

        if (index > -1) {
          const child = list[index];
          names.unshift(child.name);
          codes.unshift(child.code);
          father && names.unshift(father.name) && codes.unshift(father.code);
          father && findCity(json || [], father.code);
          return;
        }
        list.map(item => {
          if (item.cities) {
            findCity(item.cities || [], code, item);
          }
        });
      }

      findCity(json, code);
      names = [...new Set(names)];
      codes = [...new Set(codes)];
      return {codes, names};
    },
    async getCity(code) {
      let json = this.cities.city
      if (code != 100) {
        if (code.toString().startsWith('810')) {
          let result = this.getArea(json, '810000')
          this.city = result.names.join(' - ')
        } else if (code.toString().startsWith('820')) {
          let result = this.getArea(json, '820000')
          this.city = result.names.join(' - ')
        } else if (code.toString().startsWith('710')) {
          let result = this.getArea(json, '710000')
          this.city = result.names.join(' - ')
        } else {
          let result = this.getArea(json, code.toString())
          this.city = result.names.filter(item=>{
            return item!=='市辖区'
          }).join(' - ')
        }
      }
      return null
    },
    async getSingerDetail() {
      let result = await this.$API.reqUserDetail(this.$route.query.id)
      this.identify = result.data.identify
      this.level = result.data.level
      this.profile = result.data.profile
      this.listenSongs =  result.data.listenSongs
      if (result.data.profile.allAuthTypes) {
        let allAuthTypes = result.data.profile.allAuthTypes
        allAuthTypes.forEach(item => {
          if (item.desc.substring(item.desc.length - 2) === '达人') {
            this.expert.push(item)
          } else if (item.desc === '网易音乐人') {
            this.musician.push(item)
          } else if (item.desc) {
            this.identity.push(item)
          }
        })
      }
      this.nickname = result.data.profile.nickname
      this.userPoint = result.data.userPoint
      this.bindings = result.data.bindings.slice(1, 2)

      let date = this.formatDate(result.data.profile.birthday)
      this.date = date.slice(2, 4)
      await this.getCity(result.data.profile.city)
    },
  },
  mounted() {
    this.getSingerDetail()
  }
}
</script>

<style scoped lang="less">
.wrap {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 40px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .g-wrap {
    padding: 40px;
    height: auto;
    overflow: hidden;

    .m-proifo {
      width: 900px;
      height: 188px;

      .f-pr {
        width: 188px;
        height: 188px;
        float: left;
        margin-right: 40px;

        img {
          width: 188px;
          height: 188px;
          padding: 3px;
          background: #fff;
          border: 1px solid #d5d5d5;
        }
      }

      .info {
        width: 670px;
        float: left;

        .name {
          padding-bottom: 12px;
          margin-bottom: 10px;
          border-bottom: 1px solid #ddd;

          .name-f1 {
            height: auto;
            overflow: hidden;

            .edit {
              float: right;
              margin-top: 2px;

              a {
                color: #333;
                background-position: right -100px;
                padding: 0 5px 0 0;
                white-space: nowrap;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 31px;
                line-height: 31px;
                overflow: hidden;
                *line-height: 32px;
                vertical-align: top;
                text-align: center;
                cursor: pointer;
                background-repeat: no-repeat;
                background-image: url("../../../assets/button2.png");

                i {
                  padding: 0 15px 0 20px;
                  pointer-events: none;
                  display: inline-block;
                  color: #333;
                  background-position: 0 -59px;
                  background-image: url("../../../assets/button2.png");

                }
              }
            }

            .j-name-wrap {
              .singer {
                max-width: 260px;
                float: left;
                margin-top: 3px;
                font-size: 22px;
                font-weight: normal;
                line-height: 30px;
              }

              .icon-1 {
                float: left;
                width: 57px;
                height: 36px;
                background-size: auto 20px;
                background-repeat: no-repeat;
                background-position: center;
                float: left;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                background-image: url("../../../assets/vip6.png");
              }

              .icon-2 {
                float: left;
                margin: 8px 0 0 10px;
                display: inline-block;
                height: 19px;
                overflow: hidden;
                padding-left: 29px;
                line-height: 21px;
                color: #e03a24;
                font-size: 14px;
                font-weight: bold;
                font-style: italic;
                background-image: url("../../../assets/icon2.png");

                background-position: -135px -190px;

                .lv {
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: middle;
                  float: right;
                  width: 9px;
                  height: 19px;
                  background-image: url("../../../assets/icon2.png");
                  background-position: -191px -190px;
                }
              }

              .man {
                float: left;
                margin: 9px 0 0 8px;
                width: 20px;
                height: 20px;
                background-position: -41px -57px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../../assets/icon.png");
              }

              .women {
                float: left;
                margin: 9px 0 0 8px;
                width: 20px;
                height: 20px;
                background-position: -41px -27px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../../assets/icon.png");
              }
            }

            .head-oper {
              .head-1 {
                float: left;
                margin: 4px 0 0 15px;
                width: 75px;
                height: 31px;
                background-position: 0 -810px;
                display: inline-block;
                background-image: url("../../../assets/button.png");

                i {
                  font-style: normal;
                  text-align: left;
                  font-size: inherit;
                  display: inline-block;
                  height: 29px;
                  color: #333;
                  line-height: 29px;
                  padding-left: 30px;
                }
              }

              .head-2 {
                width: 70px;
                height: 31px;
                background-image: url("../../../assets/button.png");
                float: left;
                margin: 4px 0 0 15px;
                background-position: 0 -919px;

                i {
                  display: inline-block;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 26px;
                  color: #666;
                }
              }

              .guanzhu {
                float: left;
                margin: 4px 0 0 15px;
                width: 40px;
                height: 31px;
                padding-left: 30px;
                background-position: 0 -720px;
                color: #fff;
                line-height: 30px;
                background-image: url("../../../assets/button.png");
                display: inline-block;
              }
            }
          }

          .name-f2 {
            font-size: 14px;
            line-height: 20px;
            color: #666;
            margin-top: 8px;

            .yyrtag {
              display: inline-block;
              height: 16px;
              margin-left: 5px;
              padding: 0 2px;
              vertical-align: middle;
              color: rgba(0, 0, 0, 0.4);
              font-size: 12px;
              line-height: 16px;
              text-align: center;
              border: solid 1px rgba(0, 0, 0, 0.3);
              border-radius: 2px;
            }

            .yinyueren {

              margin-right: 6px;
              float: left;
              background-position: -150px -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon2.png");
            }

            .daren {
              margin-right: 6px;
              float: left;
              background-position: -75px -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon2.png");
            }

            .renz {
              margin-right: 6px;
              float: left;
              background-position: 0 -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../../assets/icon2.png");
            }
          }
        }

        .tab-box {
          height: 41px;
          margin-bottom: 15px;

          li {
            float: left;
            padding: 0 40px 0 20px;
            border-left: 1px solid #ddd;

            a {
              text-decoration: none;

              &:hover {
                color: #0C73C2;
              }
            }

            a {
              display: inline-block;
              *display: inline;
              position: relative;
              zoom: 1;
              color: #666;

              strong {
                display: block;
                margin-top: -4px;
                font-size: 24px;
                font-weight: normal;
                cursor: pointer;
              }

              span {
                display: block;
                text-indent: 2px;
                cursor: pointer;
              }
            }
          }

          .frt {
            padding-left: 0;
            border-left: none;


          }
        }

        .f-brk, .s-fc3 {
          margin-bottom: 5px;
          line-height: 21px;
          color: #666;

          .tit {
            float: left;
          }

          .sep {
            //margin-left: 20px;
          }
        }

        .u-logo {
          margin-left: -8px;
          height: auto;
          overflow: hidden;

          li {
            margin-left: 8px;
            height: 22px;
            float: left;

            .u-slg-sn {
              background-position: 0 0;
            }

            .u-slg {
              width: 20px;
              height: 20px;
              display: inline-block;
              background-image: url("../../../assets/logo.png");
            }
          }
        }
      }
    }
  }
}
</style>